<template>
  <div class="my_account_div">
    <!-- 标题部分 -->
    <my-header :left="true" title="我的账号"></my-header>
    <!-- 主体部分 -->
    <div v-if="isRander && skin_data">
      <show-in-fo
      class="show_in_fo"
        v-for="(item, index) of skin_data.gameid"
        :key="item.gameid"
        :game_data_index="index"
        :game_data="skin_data"
      >
        <template #radio>
          <div class="radio">
            <a href="javascript:" class="game_state">{{
              gameState(skin_data.game_state[index])
            }}</a>
            <template
              v-if="
                skin_data.game_state[index] == 2 ||
                skin_data.game_state[index] == 3
              "
            >
              <a
                href="javascript:"
                class="off_game"
                @click="show_dialog(item.gameid, 'update')"
                >修改价格</a
              >
              <a
                href="javascript:"
                class="update_price"
                @click="update_game(item.gameid, 'on')"
                >立即上架</a
              >
            </template>
            <a
              href="javascript:"
              class="off_game"
              v-if="skin_data.game_state[index] == 1"
              @click="update_game(item.gameid, 'off')"
              >立即下架</a
            >
          </div>
        </template>
      </show-in-fo>
    </div>
    <div v-if="!skin_data && isRander">
      <center class="font_size_16 mt60">暂无账号</center>
    </div>
    <div v-if="!isRander">
      <van-loading size="0.24rem" class="mt60" vertical>数据加载中...</van-loading>
    </div>
    <!-- 修改价格弹出层 -->
    <van-dialog
      v-model="show"
      title="修改价格"
      show-cancel-button
      @confirm="update_price"
    >
      <template>
        <van-field
          v-model="update_prcie"
          type="digit"
          label="出售价格"
          placeholder="请输入大于100的整数"
        />
      </template>
    </van-dialog>
  </div>
</template>
<script>
import MyHeader from "../common/Header";
import ShowInFo from "../Home/components/ShowInFo";
export default {
  name: "MyAccount",
  components: {
    MyHeader,
    ShowInFo,
  },
  data() {
    return {
      active: "", // 当前选中的item
      skin_data: null, // 获取到的游戏账号数据
      update_prcie: 0, // 需要修改的价格
      show: false,
      update_price_gid: null, // 当前需要修改价格的账号ID
      isRander:false, // 是否渲染页面
    };
  },
  created() {
    // 发起网络请求
    this.get_user_data();
  },
  methods: {
    // 获取用户账号信息数据
    async get_user_data() {
      this.isRander = false;
      const { data: res } = await this.$http.get("user_gameinfo");
      console.log(res);
      this.skin_data = res.data;
      this.isRander = true;
    },
    // 上架 下架 账号
    async update_game(gameid, type) {
      const { data: res } = await this.$http.post("update_game", {
        gameid: gameid,
        type: type,
        price: 0,
      });
      this.$message({position:"center",message:res.message});
      if(!res.isok)return;
      console.log(res);
      this.get_user_data();
    },
    // 修改价格弹窗
    show_dialog(gameid, type) {
      this.update_price_gid = gameid;
      this.show = true;
    },
    // 修改价格
    async update_price() {
      const { data: res } = await this.$http.post("update_game", {
        gameid: this.update_price_gid,
        type: "update",
        price: this.update_prcie,
      });
      this.$message({position:"center",message:res.message});
      if(!res.isok)return;
      console.log(res);
      this.get_user_data();
    },
  },
  computed: {
    gameState() {
      return function (stateid) {
        //  1:商城在售2:未上架3：已售出
        switch (stateid) {
          case 1:
            return "上架中";
            break;
          case 2:
            return "未上架";
            break;
          case 3:
            return "未上架";
            break;
        }
      };
    },
  },
};
</script>
<style lang="less" scoped>
.my_account_div {
  padding-top: 0.45rem;
}
.radio {
  padding: 0.15rem 0.1rem;
  background-color: #fff;
  font-size: 0.15rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  .game_state {
    flex: 1;
    color: #e74e4b;
  }
  .update_price,
  .off_game {
    box-sizing: border-box;
    display: inline-block;
    padding: 0.05rem 0.1rem;
    border: 0.01rem solid #000;
    margin-left: 0.1rem;
    border-radius: 0.3rem;
  }
  .update_price {
    border-color: #e74e4b;
    color: #e74e4b;
  }
  .off_game {
    border-color: #cccccc;
    color: #1e1e1e;
  }
}
.show_in_fo{
  margin-top: 0.06rem;
}
</style>